<template>
  <el-dialog title="碧划算商品库" :visible.sync="showGoodsPop" class="el-dialog-edit" :close-on-click-modal="false">
    <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="100px" style="width: 100%">
      <el-form-item label="所选商品：" v-if="count!==1">
        <div class="el-tag-box">
          <el-tag v-for="(goods, index) of goodsCheck" :key="index" :closable="true" @close="delGoods(index)">{{goods.title}}</el-tag>
        </div>
      </el-form-item>
      <el-form-item label="商品列表">
        <el-select v-model="listQuery.favoritesId" placeholder="请选择商品类">
          <el-option v-for="item in selectList" :key="item.favoritesId" :label="item.favoritesTitle" :value="item.favoritesId"></el-option>
        </el-select>
      </el-form-item>
      <!--form input placeholder-->
    </el-form>
    <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border @row-click="clickRow">
      <el-table-column align="center" width="50">
        <template slot-scope="scope">
          <label class="input-radio" v-if="count === 1">
            <input type="radio" :value="scope.row.goodsId" v-model="goodsCheckId[0]" />
            <span></span>
          </label>
          <label class="input-checkbox" v-else>
            <input type="checkbox" :value="scope.row.goodsId" @click="clickRow(scope.row)" v-model="goodsCheckId" />
            <span></span>
          </label>
        </template>
      </el-table-column>
      <el-table-column align="center" label="入库商品ID" width="110">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.goodsId" placement="top">
            <span class="hidetext">{{scope.row.goodsId}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品名">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.title" placement="top">
            <span class="hidetext">{{scope.row.title}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品主图">
        <template slot-scope="scope">
          <img :src="scope.row.imageUrl" style="height:80px" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="券后价">
        <template slot-scope="scope">
          <span>{{scope.row.actualPrice}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="佣金比列">
        <template slot-scope="scope">
          <span>{{scope.row.commissionRate || 0}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="优惠券剩余">
        <template slot-scope="scope">
          <span>{{scope.row.couponRemainCount}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" :aria-disabled="true">
        <template slot-scope="scope">
          <span>{{scope.row.status === 0?'失效':'有效'}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum" :page-size="listQuery.pageSize" background
      layout="total, prev, pager, next, jumper" style="text-align: center" :total="listTotal"></el-pagination>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="btnDisabled" @click="chooseGoods">确定</el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getBhsFavorGoods, getFavorSubjec } from '@/api/bihuasuan/goods'
export default {
  name: 'b-goods',
  props: {
    // 选择更多
    selectedMore: {
      type: Boolean,
      default: false
    },
    check: {
      type: Array,
      default: []
    },
    count: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      list: [],
      listQuery: {
        favoritesId: '',
        pageNum: 1,
        pageSize: 5
      },
      goodsCheckId: [],
      selectList: [], //商品选择列表
      showGoodsPop: true,
      goodsCheck: [],
      goodsRadio: {},
      listTotal: 0,
      listLoading: false,
      btnDisabled: false,
      goodsDetail: {}
    }
  },
  created() {
    this.init()
  },
  watch: {
    'listQuery.favoritesId'() {
      this.getList()
    }
  },
  methods: {
    init() {
      if (this.check.length > 0) {
        this.check.forEach(it => {
          it.goodsId && this.goodsCheckId.push(it.goodsId)
        })
      }
      if (this.count > 1) {
        this.goodsCheck = this.check
      }
      this.getSubject()
    },
    //获取商品类别
    async getSubject() {
      try {
        const { data } = await getFavorSubjec()
        this.selectList = data
        this.listQuery.favoritesId = data[0].favoritesId
        this.getList()
      } catch (error) {
        this.$message.error('获取商品类别失败')
        console.log(error)
      }
    },
    // 获取列表
    async getList() {
      this.listLoading = true
      try {
        const { data } = await getBhsFavorGoods(this.listQuery)
        this.list = data.list
        this.listTotal = data.total
        this.listLoading = false
        if (this.count === 1 && this.check.length > 0) {
          const idx = this.list.findIndex(
            it => it.goodsId === this.check[0].goodsId
          )
          if (idx !== -1) {
            this.goodsCheck = [this.list[idx]]
          }
        }
      } catch (error) {
        this.list = []
        this.listLoading = false
        console.log(error)
      }
    },
    // 单击行
    clickRow(val) {
      if (val.status === 0) {
        return
      }
      if (this.count === 1) {
        if (!this.hasGood(val)) {
          this.goodsCheck = [val]
          this.goodsCheckId = [val.goodsId]
        }
        return
      }

      if (!this.hasGood(val)) {
        this.goodsCheckId.push(val.goodsId)
        this.goodsCheck.push(val)
        // console.log('shangp2', this.goodsCheck)
      } else {
        let idx = this.goodsCheck.findIndex(it => it.goodsId === val.goodsId)
        this.goodsCheck.splice(idx, 1)
        this.goodsCheckId.splice(idx, 1)
      }
    },
    hasGood(val) {
      return this.goodsCheck.some(it => it.goodsId === val.goodsId)
    },
    // 通过tag删除
    delGoods(index) {
      this.goodsCheck.splice(index, 1)
      this.goodsCheckId.splice(index, 1)
    },
    // 去重
    filterData() {
      this.goodsCheck = this.goodsCheck.filter((val, idx, list) => {
        let fidx = this.goodsCheck.findIndex(it => val.goodsId === it.goodsId)
        return fidx === idx
      })
    },
    // 选择商品
    chooseGoods() {
      this.filterData()
      if (this.goodsCheck.length < 1) {
        return this.$message.error('请选择商品')
      }

      if (!this.selectedMore) {
        if (this.count > 0 && this.goodsCheck.length > this.count) {
          return this.$message.error(`最多选择${this.count}个商品`)
        }
      }
      this.$emit('choose', this.goodsCheck)
      // console.log('历的商品', this.goodsCheck)
      this.close()
    },
    // 关闭弹窗
    close() {
      this.showGoodsPop = false
      document.body.removeChild(this.$el)
    },
    // 搜索
    search() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    // 切换分页
    handleCurrentChange(page) {
      this.listQuery.pageNum = page
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.hidetext {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100px;
}
</style>